<template>
  <div id="app">
    
    <Nav></Nav>
    <div v-on:click="clickshow">
      <router-link class="routelink" to="/new">推荐</router-link>
      <router-link class="routelink" to="/newcp">疯抢</router-link>
      <router-link class="routelink" to="/new">清仓</router-link>
      <router-link class="routelink" to="/new">侍寝</router-link>
    </div>
    <div><router-view></router-view></div>
    <div v-if="show">
      <Top></Top>
      <Center></Center>
      <Bottom></Bottom>
    </div>
  </div>
</template>

<script>
import Nav from "./components/nav.vue";
import Top from "./components/top.vue";
import Center from "./components/center.vue";
import Bottom from "./components/bottom.vue";

export default {
  name: "App",
  data: function () {
    return {
      show: true,
    };
  },
  components: {
    Top,
    Nav,
    Center,
    Bottom,
  },
  methods: {
    clickshow() {
      this.show = false;
      console.log(this.show);
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#app {
  text-align: center;
  background-color: #cccccc;
  width: 390px;
  height: -webkit-fill-available;
}
.top,
.center,
.bottom {
  width: 300px;
  height: 230px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  background-color: white;
}
#app div {
  margin: 5px auto 10px auto;
}
.introduce {
  text-align: left;
  margin-top: 10px;
}
span:first-child {
  font-weight: 700;
}
img {
  width: 300px;
}
.routelink {
  text-decoration: none;
  margin: 0 10px;
  color: black;
}
</style>
